﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WordPaster For tinymce-3.5.10</title>
    <link type="text/css" rel="Stylesheet" href="demo.css" />
    <link type="text/css" rel="Stylesheet" href="WordPaster/js/skygqbox.css" />
    <script type="text/javascript" src="WordPaster/js/json2.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="WordPaster/js/jquery-1.4.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="WordPaster/js/skygqbox.js" charset="utf-8"></script>
    <script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript" src="WordPaster/js/w.js" charset="utf-8"></script>
    <script type="text/javascript" src="zyCapture/z.js" charset="utf-8"></script>
    <script type="text/javascript" src="zyOffice/js/o.js" charset="utf-8"></script>
    <script type="text/javascript" src="vue.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="demo.js" charset="utf-8"></script>
</head>
<body>
    <div style=" font-size:medium; line-height:130%;">
        <p>演示方法：</p>
        <ul style="list-style-type:decimal;">
            <li>打开Word文档，复制多张图片，然后在编辑器中按 Ctrl+V 粘贴，编辑器将自动上传所有图片。</li>
            <li>复制电脑中任意图片文件，然后点击编辑器中的图片粘贴按钮。</li>
            <li>通过QQ或其它软件截屏，复制图片，然后点击编辑器中的图片粘贴按钮。</li>
        </ul>
        <p>相关问题：</p>
        <ul style="list-style-type:decimal;">
            <li>安装插件<a target="_blank" href="http://www.ncmem.com/webapp/wordpaster/pack.aspx">下载插件</a></li>
            <li>WindowxXP/Windows7/Windows2003如果无法识别数字证书，请先下安装<a target="_blank" href="http://www.ncmem.com/download/WoSignRootUpdate.rar">数字签名根证书</a></li>
        </ul>
        <div id="demos"></div>
        <div id="vue-tinymce">
            <tinymce ref="tin">WordPaster与tinymce 3.x整合示例。</tinymce>
        </div>
    </div>    
    <!--创建TinyCME控件-->
    <script language="javascript" type="text/javascript">
        //定义组件
        Vue.component('tinymce', {
            data: function(){
                return {
                    editor: null
                }
            },
            props: { value: '', },
            mounted: function(){
                var pos = window.location.href.lastIndexOf("/");
                var api = [
                    window.location.href.substr(0, pos + 1),
                    "upload.aspx"
                ].join("");
                WordPaster.getInstance({
                    //上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203ed
                    PostUrl: api,
                    //为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
                    ImageUrl: "",
                    //设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
                    FileFieldName: "file",
                    //提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
                    ImageMatch: '',
                    Cookie: 'ASP.NET_SessionId=<%=Session.SessionID%>',
                    event: {
                        dataReady: function (e) {
                            //e.word,
                            //e.imgs:tag1,tag2,tag3
                            console.log(e.imgs)
                        }
                    }
                });//加载控件

                //zyCapture
                zyCapture.getInstance({
                    config: {
                        PostUrl: api,
                        FileFieldName: "file",
                        Fields: { uname: "test" }
                    }
                });

                //zyoffice，
                //使用前请在服务端部署zyoffice，
                //http://www.ncmem.com/doc/view.aspx?id=82170058de824b5c86e2e666e5be319c
                zyOffice.getInstance({
                    word: "http://localhost:13710/zyoffice/word/convert",
                    wordExport: "http://localhost:13710/zyoffice/word/export",
                    pdf: "http://localhost:13710/zyoffice/pdf/upload"
                });

                tinyMCE.init({
                    // General options
                    mode: "textareas",
                    theme: "advanced",
                    plugins: "zycapture,wordpaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport,importword,exportword,importpdf,autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

                    // Theme options
                    theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
                    theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,zycapture,wordpaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport,importword,exportword,importpdf,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                    theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
                    theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
                    theme_advanced_toolbar_location: "top",
                    theme_advanced_toolbar_align: "left",
                    theme_advanced_statusbar_location: "bottom",
                    theme_advanced_resizing: true,

                    // Skin options
                    skin: "o2k7",
                    skin_variant: "silver",

                    // Example content CSS (should be your site CSS)
                    content_css: "css/example.css",

                    // Drop lists for link/image/media/template dialogs
                    template_external_list_url: "js/template_list.js",
                    external_link_list_url: "js/link_list.js",
                    external_image_list_url: "js/image_list.js",
                    media_external_list_url: "js/media_list.js",

                    // Replace values for the template plugin
                    template_replace_values: {
                        username: "Some User",
                        staffid: "991234"
                    }
                });

                WordPaster.getInstance().SetEditor(tinymce.activeEditor);
            },
            methods: {},
            destroyed: function(){ },
            template: '<textarea id="editor" name="editor"/>'
        });

        //创建vue对象
        var tin = new Vue({
            el: '#vue-tinymce',
            data: {}
            , mounted: function () {
            }
        });
    </script>
</body>
</html>